<template>
  <div id="container"></div>
</template>

<script>
import Collision from './collision.min.js'
const  pos= [{ x: 45, y: 55 }, { x: 80+45, y: 70+45 }, { x: 120+55, y: 10+45 }, { x: 155+55, y: 80+45 }, { x: 190+55, y: 20+45 }, { x: 245+45, y: 60+45 }, { x: 342, y: 88 }]
export default {
  name: "bubble-box",
  props: {
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      ballBox: null,
      balls:[],
    }
  },
  watch: {
    dataList: {
      handler (newVal, oldVal) {
        console.log('newVal', newVal, oldVal);
        this.$nextTick(() => {
          this.initBall();
        })
        //this.initBall();
      },
      immediate:true,
    }
  },
  mounted () {
    window.addEventListener('resize', this.scaleBox);
  },
  beforeDestroy () {
    if (this.ballBox) {
      this.ballBox.ballStop();
    }

    window.removeEventListener('resize',this.scaleBox)
  },
  methods: {
    insertCharacter (str, char, n) {
      return str.replace(new RegExp(`(.{${n}})`, 'g'), `$1${char}`);
    },
    initBall () {
      function rand (m, n) { return m + parseInt((n - m) * Math.random()); }
      var says = [];
      for (let s of this.dataList) {
        says.push(this.insertCharacter(s.title,"<br/>",4));
      }
      var saysLength = says.length;
      var oC = document.getElementById('container');
      var mxwidth = oC.offsetWidth;
      var mxheight = oC.offsetHeight;

      this.balls = [];
      if (this.ballBox) {
        this.ballBox.clear();
      }


      var oB = new Collision.BallBox('container');
      this.ballBox = oB;
      oB.ballRun();
      for (let i = 0; i < saysLength; i++) {
        var b = 30;
        if (this.dataList[i].title.length < 5) {
          b += (this.dataList[i].title.length - 3) * 5
        }
        else {
          b = 45;
        }
        var x = rand(b, mxwidth - b);
        var y = rand(b, mxheight - b);
        var ball = new Collision.Ball({
          'b': b,     //大小
          'x': pos[i].x,
          'y': pos[i].y,
          'sx': 1,
          'sy': 1,
          'c': this.dataList[i].func?'url(/ybt/static/paopao1.png)':'url(/ybt/static/circle.png)',
          // 'opa': rand(60, 100) / 100,

          'html': says[i],
          'callBack': function (n) {
            //this.setB(rand(30,50));
            //this.setM();
            //this.setOpa(rand(60, 100) / 100);
            // if (n % 3 == 0) { this.setC('url(img/paopao' + rand(1, 6) + '.png)') };//撞三次改变下图片
            // if (n % 50 == 0) {
            //   this.setB(rand(40 + parseInt((n > 1000 ? 1000 : n) / 50), 60 + parseInt((n > 1000 ? 1000 : n) / 50)));
            // }//撞50次改大小
            //this.setHTML(says[i]);
          },
          'clickCallBack': this.dataList[i].func
        });
        oB.addBall(ball);
        this.balls.push(ball)
      }
    },
    scaleBox () {
      this.balls.forEach((item) => {
        item.scaleBox();
      })
    }
  }
}
</script>
<style lang='scss' scoped>
#container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
</style>
